手順2:ボタンの追加

この手順では、アプリケーションにさらに XAML マークアップを追加します。このマークアップは、C1Scheduler のビューを制御するためのボタン要素を作成します。

開始タグ <Grid> の下に次の XAML マークアップを追加します。これは、行定義を追加します。

マークアップ	コードのコピー
<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> </Grid.RowDefinitions>

Grid.RowDefinitions の下に、汎用 StackPanel コントロールを追加します。このコントロールは次のマークアップのようになります。

マークアップ
コードのコピー

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
    <StackPanel.Resources>
        <Style TargetType="Button" x:Key="btnStyle">
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="MinWidth" Value="100"/>
        </Style>
    </StackPanel.Resources>
</StackPanel>

マークアップ	コードのコピー
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center"> <StackPanel.Resources> <Style TargetType="Button" x:Key="btnStyle"> <Setter Property="VerticalAlignment" Value="Stretch"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="MinWidth" Value="100"/> </Style> </StackPanel.Resources> </StackPanel>

４つの汎用ボタンコントロールを</StackPanel.Resources> と</StackPanel> タグの間に追加します。次のようにマークアップを編集します。各ボタンには Click イベントがあります。

マークアップ
コードのコピー

<Button Click="DayClick" Style="{StaticResource btnStyle}">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
            <TextBlock Text=" Day" VerticalAlignment="Center"/>
        </StackPanel>
    </Button.Content>
</Button>
<Button Click="WorkWeekClick" Style="{StaticResource btnStyle}">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
            <TextBlock Text=" Work Week" VerticalAlignment="Center"/>
        </StackPanel>
    </Button.Content>
</Button>
<Button Click="WeekClick" Style="{StaticResource btnStyle}">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
            <TextBlock Text=" Week" VerticalAlignment="Center"/>
        </StackPanel>
    </Button.Content>
</Button>
<Button Click="MonthClick" Style="{StaticResource btnStyle}">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
            <TextBlock Text=" Month" VerticalAlignment="Center"/>
        </StackPanel>
    </Button.Content>
</Button>

マークアップ	コードのコピー
<Button Click="DayClick" Style="{StaticResource btnStyle}"> <Button.Content> <StackPanel Orientation="Horizontal"> <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/> <TextBlock Text=" Day" VerticalAlignment="Center"/> </StackPanel> </Button.Content> </Button> <Button Click="WorkWeekClick" Style="{StaticResource btnStyle}"> <Button.Content> <StackPanel Orientation="Horizontal"> <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/> <TextBlock Text=" Work Week" VerticalAlignment="Center"/> </StackPanel> </Button.Content> </Button> <Button Click="WeekClick" Style="{StaticResource btnStyle}"> <Button.Content> <StackPanel Orientation="Horizontal"> <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/> <TextBlock Text=" Week" VerticalAlignment="Center"/> </StackPanel> </Button.Content> </Button> <Button Click="MonthClick" Style="{StaticResource btnStyle}"> <Button.Content> <StackPanel Orientation="Horizontal"> <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/> <TextBlock Text=" Month" VerticalAlignment="Center"/> </StackPanel> </Button.Content> </Button>

ここまでの成果

この手順では、アプリケーションに４つのボタンコントロールのマークアップを追加しました。次の手順では、Button_Click イベントのコードを追加します。